<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
    <p id="text"></p>
    <script>
      let input = document.getElementById('input')
      let p = document.getElementById('text')
      let person = {
        name: '张三',
        age: 18,
      }

      const newProxy = new Proxy(person, {
        get(target, propName) {
          console.log(`有人读取了p身上的${propName}属性`)
          return target[propName]
        },
        set(target, propName, value) {
          console.log(`有人修改了p身上的${propName}属性,我要去更新页面了`)
          target[propName] = value
        },
        deleteProperty(target, propName) {
          console.log(`有人删除了p身上的${propName}属性，我要去更新页面了`)
          return delete target[propName]
        },
      })

      // Reflect的使用
      const newProxy1 = new Proxy(person, {
        get(target, propName) {
          console.log(`有人读取了p身上的${propName}属性`)
          return Reflect.get(target, propName)
        },
        set(target, propName, value) {
          console.log(`有人修改了p身上的${propName}属性,我要去更新页面了`)
          Reflect.set(target, propName, value)
        },
        deleteProperty(target, propName) {
          console.log(`有人删除了p身上的${propName}属性，我要去更新页面了`)
          return Reflect.defineProperty(target, propName)
        },
      })
    </script>
  </body>
</html>
